<template>
  <div class="container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="未处理" name="1">
        <!-- 未处理的表单和表格区域 -->
        <div class="header">
          <el-form :inline="true" :model="formInline" size="small" label-min-width="80px">
            <!-- <el-form-item label="部门">
              <el-select v-model="formInline.checkinDeptId" placeholder="部门">
                <el-option v-for="item in deptList" :key="item.deptId" :label="item.deptName" :value="item.deptId" />
              </el-select>
            </el-form-item> -->

            <el-form-item label="诉求人姓名">
              <el-input v-model="formInline.demandsName" placeholder="诉求人姓名" />
            </el-form-item>

            <el-form-item label="乡镇">
              <el-select v-model="formInline.checkinTownshipId" placeholder="乡镇">
                <el-option v-for="item in checkin_township" :key="item.dictCode" :label="item.dictLabel"
                  :value="item.dictCode" />
              </el-select>
            </el-form-item>

            <el-form-item label="办理周期">
              <el-date-picker v-model="formInline.dateRange" value-format="yyyy-MM-dd" type="daterange"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2" />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
              <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 未处理表格区域 -->
        <el-table :data="ajChuli" style="width: 100%" stripe>
          <el-table-column prop="caseMainId" label="ID" width="80" />
          <el-table-column prop="createTime" label="登记时间" width="160" />
          <el-table-column label="简要事由" prop="checkinSummary" width="300">
            <template slot-scope="scope">
              <el-popover width="400" class="item" effect="dark" :content="scope.row.checkinSummary"
                placement="top-start" trigger="hover">
                <span slot="reference">{{ scope.row.checkinSummary.slice(0, 80) + (scope.row.checkinSummary.length > 80
                  ?
                  '...' : '') }}</span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="demandsName" label="姓名" width="100" />
          <el-table-column prop="demandsSexNmae" label="性别" width="80" />
          <el-table-column prop="checkinPhonenumber" label="联系电话" width="160" />
          <el-table-column prop="demandsCardno" label="身份证号" width="180" />
          <el-table-column prop="demandsAvatar" label="家庭住址或单位" width="200" />
          <el-table-column prop="disposeEndTime" label="案件剩余时间" width="180">
            <template #default="scope">
              <span>{{ initTime(scope.row.disposeEndTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="checkinDictJflxName" label="纠纷类型" width="120">
            <template #default="scope">
              <el-tag type="info">{{ scope.row.checkinDictJflxName }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right">
            <template #default="scope">
              <el-button size="small" type="text" v-has-permi="['anjianchuli']"
                @click="handleItem(scope.row)">处理</el-button>
              <!-- <el-button size="small" type="danger" class="delete-btn" @click="deleteItem(scope.row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="已处理" name="2">
        <!-- 已处理的表单和表格区域 -->
        <div class="header">
          <el-form :inline="true" :model="formInline" size="small" label-width="80px">
            <!-- <el-form-item label="部门">
              <el-select v-model="formInline.checkinDeptId" placeholder="部门">
                <el-option v-for="item in deptList" :key="item.deptId" :label="item.deptName" :value="item.deptId" />
              </el-select>
            </el-form-item> -->

            <el-form-item label="搜索">
              <el-input v-model="formInline.user" placeholder="请输入关键字" />
            </el-form-item>

            <el-form-item label="乡镇">
              <el-select v-model="formInline.checkinTownshipId" placeholder="乡镇">
                <el-option v-for="item in checkin_township" :key="item.dictCode" :label="item.dictLabel"
                  :value="item.dictCode" />
              </el-select>
            </el-form-item>

            <el-form-item label="办理周期">
              <el-date-picker v-model="formInline.dateRange" value-format="yyyy-MM-dd" type="daterange"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2" />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
              <el-button icon="el-icon-refresh" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 已处理表格区域 -->
        <el-table :data="ajChuli" style="width: 100%" stripe>
          <el-table-column prop="caseMainId" label="序号" width="80" />
          <el-table-column prop="createTime" label="登记时间" width="160" />
          <el-table-column label="简要事由" prop="checkinSummary" width="300">
            <template slot-scope="scope">
              <el-popover width="400" class="item" effect="dark" :content="scope.row.checkinSummary"
                placement="top-start" trigger="hover">
                <span slot="reference">{{ scope.row.checkinSummary.slice(0, 80) + (scope.row.checkinSummary.length > 80
                  ?
                  '...' : '') }}</span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="诉求人信息" width="280">
            <template #default="scope">
              <div>
                {{ scope.row.demandsName }} | {{ scope.row.demandsSexNmae }} |
                {{ scope.row.demandsPhonenumber }}
              </div>
              <div>{{ scope.row.demandsCardno }}</div>
              <div>{{ scope.row.demandsAvatar }}</div>
            </template>
          </el-table-column>

          <el-table-column label="相关身份信息" width="350">
            <template #default="scope">
              <div v-for="(person, index) in scope.row.mdjfCasePersonList" :key="index">
                {{ person.casePersonName }} | {{ person.casePersonPhonenumber }} | {{ person.casePersonCardno }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="checkinDictJflxName" label="纠纷类型" width="120">
            <template #default="scope">
              <el-tag type="info">{{ scope.row.checkinDictJflxName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="附件" width="50">
            <template #default="scope">
              <el-tag type="info">{{
                scope.row.deptdisposeFile
                  ? scope.row.deptdisposeFile.split(",").length
                  : "无"
              }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="处理状态" width="100">
            <template #default="scope">
              <el-tag type="success">{{
                stringType(scope.row.disposeStatus)
              }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right">
            <template #default="scope">
              <el-button type="text" size="small" @click="handleSeeItem(scope.row)">查看</el-button>
              <!-- <el-button size="small" type="danger" class="delete-btn" @click="deleteItem(scope.row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination background @current-change="handlePageChange" :current-page="formInline.pageNum"
        :page-size="formInline.pageSize" :total="totalItems" layout="total, prev, pager, next" class="pagination" />
    </div>
  </div>
</template>

<script>
import { getDicts } from "@/api/system/dict/data"; /* 通用接口：字典 */
import { mainlist, DelAccept } from "@/api/aapal"; /* 列表查询接口 */
// import { listDept } from "@/api/system/dept"; /* 查询部门接口 */

export default {
  data() {
    return {
      activeName: "1" /* 头部tabs切换 */,
      checkin_township: "" /* 乡镇数据 */,
      deptList: "" /* 部门查询 */,
      ajChuli: [] /* 数据列表 */,
      disposeStatusList: [] /* 处理状态列表 */,
      pickerOptions2: {
        /* 时间周期 */
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      formInline: {
        disposeStatus: '1',
        checkinDeptId: "",
        checkinTownshipId: "",
        status: 0,
        pageNum: 1,
        pageSize: 5,
        dateRange: [],
      },
      ruleForm: [],

      pageSize: 5,
      totalItems: 0,
    };
  },
  mounted() {
    this.getDict(),
      // this.getlistDept();
      this.getList();
    this.getDict2();
    setInterval(() => {
      this.getList();
    }, 60000);
  },
  methods: {
    initTime(timeString) {
      const targetTime = new Date(timeString);
      const currentTime = new Date();
      const timeDifference = targetTime - currentTime;

      // 将毫秒转换为不同的时间单位
      const seconds = Math.floor(timeDifference / 1000);
      const minutes = Math.floor(seconds / 60);
      const hours = Math.floor(minutes / 60);
      const days = Math.floor(hours / 24);
      return (
        days +
        "天" +
        (hours % 24) +
        "小时" +
        (minutes % 60) +
        "分钟" +
        (seconds % 60)
      );
      // return { days, hours: hours % 24, minutes: minutes % 60, seconds: seconds % 60 };
    },
    stringType(e) {
      let a = "";
      this.disposeStatusList.forEach((item) => {
        if (item.dictSort == e) {
          a = item.dictLabel;
        }
      });
      return a;
    },
    /* 获取乡镇字典数据 */
    getDict() {
      getDicts("checkin_township").then((res) => {
        this.checkin_township = res.data;
      });
    },
    /* 获取处理状态字典数据 */
    getDict2() {
      getDicts("dispose_status").then((res) => {
        this.disposeStatusList = res.data;
      });
    },
    /* 部门查询接口 */
    // getlistDept() {
    //   listDept().then((res) => {
    //     this.deptList = res.data;
    //   });
    // },
    /* 列表查询接口 */
    /* 列表查询接口 */
    getList() {
      const params = {
        ...this.formInline,
        startTime: this.formInline.dateRange
          ? this.formInline.dateRange[0]
          : "",
        endTime: this.formInline.dateRange
          ? this.formInline.dateRange[1]
          : "",
      };
      delete params.dateRange; // 移除数组参数

      mainlist(params).then((res) => {
        this.ajChuli = res.rows;
        this.totalItems = res.total;
      });
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以需要加1
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },

    /* 头部tabs切换 */
    handleClick(e) {
      this.formInline.disposeStatus = e.name;
      this.activeName = e.name;
      this.getList();
    },
    /* 搜索按钮 */
    onSearch() {
      this.getList();
    },
    /* 重置按钮 */
    onReset() {
      this.formInline = { disposeStatus: this.activeName, status: 0, pageNum: 1, pageSize: 5, dateRange: [] };
      this.getList();
    },
    handleItem(row) {
      this.$router.push({
        path: "/dispose/dispose/ajChuli/",
        query: { id: row.caseMainId },
      }); // 假设 row 对象有一个 id 属性
    },
    handleSeeItem(row) {
      this.$router.push({
        path: "/dispose/dispose/ajChakan/",
        query: { id: row.caseMainId },
      });
    },

    // 删除
    deleteItem(row) {
      DelAccept(row.caseMainId).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功",
          });
          this.getList();
        } else {
          this.$message({
            type: "error",
            message: "删除失败",
          });

        }
      });
    },
    // 分页更改
    handlePageChange(page) {
      this.formInline.pageNum = page;
      this.getList();
    },
  },
};
</script>

<style scoped>
.container {
  margin: 20px 30px;
  font-family: "Arial", sans-serif;
}

.header {
  margin-bottom: 20px;
  background-color: #f4f7fa;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.button {
  font-size: 14px;
  padding: 8px 16px;
}

.search-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.search-input {
  width: 200px;
  margin-right: 20px;
  border-radius: 4px;
}

.search-btn,
.reset-btn {
  padding: 8px 16px;
  font-size: 14px;
}

.search-btn {
  background-color: #409eff;
  color: white;
  margin-right: 10px;
}

.reset-btn {
  background-color: #f0f2f5;
  color: #333;
}

.process-btn {
  background-color: #409eff;
  color: white;
  margin-right: 5px;
  border-radius: 4px;
}

.delete-btn {
  background-color: #f56c6c;
  color: white;
  border-radius: 4px;
}

.el-table th {
  background-color: #f5f7fa;
  font-weight: bold;
}

.el-table td {
  font-size: 14px;
  line-height: 40px;
}

.el-table-row:hover {
  background-color: #f0f9ff;
}

.pagination {
  font-size: 14px;
}

.el-pagination__prev,
.el-pagination__next {
  background-color: #409eff;
  color: white;
}

.el-pagination__pager {
  color: #409eff;
}

.is-active {
  background-color: #fff !important;
}
</style>
